<template>
  <fieldset class="fathercom">
    <legend>父组件</legend>
    <p>
        <input type="text" placeholder="请输入传递给子组件的数据" v-model="txt" />
        <button @click="sendFun()">点击之后，子组件才能拿到数据</button>
    </p>
    <hr>
    <form @submit.prevent="login()">
        <input type="text" placeholder="请输入用户名" v-model.lazy.trim="username"/>
        <input type="password" placeholder="请输入密码" v-model.lazy.trim="userpwd">
        <input type="submit" value="登录">
    </form>

    <SonCom :sondata='obj'/>
  </fieldset>
</template>


<!--情况1:msg有固定值的时候,如何实现点击之后才向子组件传递数据-->
<!--情况2:msg的值不固定,如何在获取值之后点击,向子组件传递数据-->
<script setup>
//导入子组件（采用组合式API时可以省略注册组件步骤）
import {reactive, ref} from 'vue';
import SonCom from './SonCom.vue';


// 双向数据绑定
let txt = ref('');
let username = ref('');
let userpwd = ref('');


// 将父组件的数据打包成对象同一传递给子组件
let obj = reactive({
    uname : '',
    upwd : '',
    msg:'',
})


// 提交事件:整理数据,传递数据
const login=()=>{
    obj.uname  = username.value;
    obj.upwd = userpwd.value
    // 清空表单
    username.value = '';
    userpwd.value = '';
}
const sendFun =()=>{
  obj.msg=txt.value;
}

</script>

<style scoped>
.fathercom p{
    line-height: 50px;
    width: 50%;
    display: flex;
    justify-content: space-between;
}
.fathercom p input{
    width: 70%;
    line-height: 40px;
    margin-left: 5px;
}
</style>